<template>
  <el-select v-model="l_sexId" :loading="loading" @change="selectChanged">
    <el-option v-for="item in options" :key="item.AutoId" :label="item.Name" :value="item.AutoId">
      <span style="float: left">{{ item.Name }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.AutoId }}</span>
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      options: [],
      l_sexId: null
    }
  },
  model: {
    prop: 'sexId',
    event: 'sexSelected'
  },
  beforeMount() {
    ;(this.options = [
      { AutoId: 0, Name: '未知' },
      { AutoId: 1, Name: '男' },
      { AutoId: 2, Name: '女' }
    ]),
      (this.l_sexId = this.sexId)
  },
  watch: {
    sexId: function(value) {
      this.l_sexId = value
    }
  },
  props: ['sexId'],
  methods: {
    selectChanged(params) {
      this.$emit('sexSelected', params)
    }
  }
}
</script>